<script>
import border from "@/views/formShortLink/border/index.vue";
import { time } from "echarts";

export default {
  props: {
    allRoutes: {
      type: Array,
      required: true
    }
  },
  components: { border },
  data() {
    return {
      timeRange: ['2025-08-31 08:00', '2025-08-31 13:00'],
      result: []// 存放过滤结果
    }
  },
  mounted() {
    this.handleTimeRangeChange();
  },
  methods: {
    filterData() {
      this.$emit('track-selected', this.result);
      this.$emit('track-selected1', this.result);
      this.$emit('close')
    },
    // 时间选择器变化时触发
    handleTimeRangeChange() {
      if (!this.timeRange || this.timeRange.length !== 2) {
        this.result = [];
        return;
      }

      const [startStr, endStr] = this.timeRange;
      const startTime = new Date(startStr);
      const endTime = new Date(endStr);

      const result = [];

      this.allRoutes.forEach(route => {
        let lastValidPoint = null;
        let lastValidTime = null;

        route.points.forEach(point => {
          const pointTime = new Date(point.time);

          if (pointTime >= startTime && pointTime <= endTime) {
            // 更新最后一个有效点
            lastValidPoint = point;
            lastValidTime = point.time;
          }
        });

        // 如果找到了有效点，加入结果
        if (lastValidPoint) {
          result.push({
            trackId: route.trackId,
            time: lastValidTime,
            coord: lastValidPoint.coord
          });
        }
      });

      this.result = result;
      console.log(result);

    }
  }
}
</script>

<template>
  <border title="人员定位" :foldUpBtn="true" w="420px" h="150px" @close="$emit('close')" x="650px" y="30%">
    <div class="trajectoryPage">
      <div class="top">
        <el-form :inline="true" size="mini">
          <el-form-item label="选择时间">
            <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
              @change="handleTimeRangeChange">
            </el-date-picker>

            <!-- <div v-if="result.length > 0" style="margin-top: 20px;">
              <h3>结果（每个 trackId 在时间范围内的最后一个点）：</h3>
              <div v-for="item in result" :key="item.trackId">
                trackId: {{ item.trackId }} → coord: [{{ item.coord.join(', ') }}]
              </div>
            </div> -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="filterData()">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </border>

</template>

<style scoped lang="scss">
.trajectoryPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;

  ::v-deep .el-table__expand-icon--expanded {
    display: none;
  }

  .top {
    display: flex;
    flex-direction: column;
  }

  .centerDiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 80px);
    background-color: #00afff;
  }
}
</style>
